<template>
  <div class="companySetting">
    <section class="header clearfix">
      <span>公司设置</span>
    </section>
    <ul class="menu-swtich">
      <li
        v-for="(item, index) in menu"
        :key="index"
        :class="[switchIndex == index ? 'active' : '']"
        @click="switchFun(index)"
      >
        {{ item.title }}
      </li>
    </ul>
    <!-- <div class="content" v-show="switchIndex==0">
      <div class="content-header clearfix">
        <div class="title">基本设置</div>
        <div class="edit" @click="infoDialog = true">
          <i class="iconfont iconweibiaoti2010104"></i>
          编辑
        </div>
      </div>
      <div class="main-content">
        <section>
          <span class="st">发薪日</span>
          <span>10月10日</span>
        </section>
        <section>
          <span class="st">计薪周期</span>
          <span>9月</span>
        </section>
        <section>
          <span class="st">《9月工资表》匹配</span>
          <span>《10月五险一金缴费明细》</span>
        </section>
        <ul class="payDetailList">
          <li>10月社保+10月公积金（北京海淀）</li>
          <li>10月社保+10月公积金（北京朝阳）</li>
          <li>10月社保+10月公积金（上海上海市）</li>
          <li>10月社保+10月公积金（上海只缴社保）</li>
        </ul>
      </div>
      <div class="content-header segmentation clearfix">
        <div class="title">规则设置</div>
        <div class="edit" @click="ruleDialog = true">
          <i class="iconfont iconweibiaoti2010104"></i>
          编辑
        </div>
      </div>
      <div class="main-content">
        <section>
          <span class="st">工作时间</span>
          <span>做五休二</span>
        </section>
        <section>
          <span class="st">计薪规则</span>
          <span>简单折算</span>
        </section>
        <ul class="payDetail">
          <li>按照每月计薪天数21.75简单折算</li>
        </ul>
      </div>
    </div> -->
    <div class="content" v-show="switchIndex == 0">
      <div class="table">
        <el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="name" fixed label="社保方案"></el-table-column>
          <el-table-column
            prop="phone"
            label="适用城市(区域)"
          ></el-table-column>
          <el-table-column prop="name" label="适用户口类型"></el-table-column>
          <el-table-column prop="name" label="基数范围"></el-table-column>
          <el-table-column prop="name" label="适用人数"></el-table-column>
          <el-table-column label="详情" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" @click="lookSs(scope.$index, scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="content" v-show="switchIndex == 1">
      <div class="table">
        <el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="name" fixed label="社保方案"></el-table-column>
          <el-table-column
            prop="phone"
            label="适用城市(区域)"
          ></el-table-column>
          <el-table-column prop="name" label="适用户口类型"></el-table-column>
          <el-table-column prop="name" label="基数范围"></el-table-column>
          <el-table-column prop="name" label="适用人数"></el-table-column>
          <el-table-column label="查看详情" fixed="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="fundDetail(scope.$index, scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--修改基本设置-->
    <el-dialog
      title="修改基本设置"
      :visible.sync="infoDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      center
    >
      <el-form :model="info">
        <el-form-item label="发薪日">
          <el-select v-model="info.day" placeholder="请选择">
            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in 31"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计薪周期">
          <el-select v-model="info.week" placeholder="请选择">
            <el-option label="上月" value="上月"></el-option>
            <el-option label="当月" value="当月"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工资表匹配五险一金缴费明细">
          <el-select v-model="info.mapping" placeholder="请选择">
            <el-option label="上月" value="上月"></el-option>
            <el-option label="当月" value="当月"></el-option>
            <el-option label="次月" value="次月"></el-option>
          </el-select>
        </el-form-item>
        <ul class="payDetail">
          <li>说明：</li>
          <li>1、以当前10月份为例：</li>
          <li>10月10日发放9月薪水，《9月工资表》匹配《10月五险一金明细》</li>
          <li>2、《10月五险一金明细》中包含：</li>
          <li>10月社保+10月公积金（北京海淀）</li>
          <li>10月社保+10月公积金（北京朝阳）</li>
          <li>10月社保+10月公积金（上海上海市）</li>
          <li>10月社保+10月公积金（上海只缴社保）</li>
        </ul>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="infoDialog = false">取 消</el-button>
        <el-button type="primary" @click="infoDialog = false">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改规则设置-->
    <el-dialog
      title="修改规则设置"
      :visible.sync="ruleDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      center
    >
      <el-form :model="ruleObj">
        <el-form-item label="工作时间">
          <el-select v-model="ruleObj.date" placeholder="请选择">
            <el-option label="做五休二" value="做五休二"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计薪规则">
          <el-select v-model="ruleObj.rule" placeholder="请选择">
            <el-option label="简单折算" value="简单折算"></el-option>
          </el-select>
        </el-form-item>
        <ul class="payDetail">
          <li>
            简单折算使用21.75作为每月的计薪天数，在许多情况下存在误差。
            如果贵司没有历史包袱，建议使用按照工作台历执行的“自动计算”。
          </li>
        </ul>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ruleDialog = false">取 消</el-button>
        <el-button type="primary" @click="ruleDialog = false">确 定</el-button>
      </div>
    </el-dialog>
    <!--社保规则-->
    <el-dialog title="社保规则" :visible.sync="dialogTableVisible" >
      <el-table :data="gridData">
        <el-table-column
          property="project"
          label="项目"
          width="150"
        ></el-table-column>
        <el-table-column
          property="project"
          label="基数范围"
          width="200"
        ></el-table-column>
        <el-table-column property="project" label="个人比例"></el-table-column>
        <el-table-column property="project" label="公司比例"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogTableVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!--公积金规则-->
    <el-dialog title="公积金规则" :visible.sync="fundVisible">
      <el-table :data="gridData">
        <el-table-column
          property="project"
          label="项目"
          width="150"
        ></el-table-column>
        <el-table-column
          property="project"
          label="基数范围"
          width="200"
        ></el-table-column>
        <el-table-column property="project" label="个人比例"></el-table-column>
        <el-table-column property="project" label="公司比例"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="fundVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import base from "@/assets/js/base";
import { requestApiPost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  name: "companySetting",
  data() {
    return {
      isNumber: 0,
      switchIndex: 0,
      searchContent: "",
      infoDialog: false,
      ruleDialog: false,
      dialogTableVisible: false,
      fundVisible: false,
      info: {
        day: "",
        week: "",
        mapping: "",
      },
      ruleObj: {
        date: "",
        rule: "",
      },
      menu: [{ title: "社保规则" }, { title: "公积金规则" }],
      tableData: [
        {
          name: "薛文诚",
        },
      ],
      gridData: [{ project: "养老金" }],
    };
  },
  methods: {
    lookSs(i, obj) {
      this.dialogTableVisible = true;
    },
    fundDetail(i, obj) {
      this.fundVisible = true;
    },
    isClick(num) {
      this.isNumber = num;
    },
    switchFun(i) {
      this.switchIndex = i;
    },
  },
  created() {},
};
</script>
<style scoped>
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.header i {
  margin-right: 5px;
}
.menu-swtich {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
}
.menu-swtich li {
  display: inline-block;
  padding: 0 15px;
  cursor: pointer;
}
.active {
  color: #13cb6e;
  border-bottom: 2px solid #13cb6e;
}
.content {
  padding: 20px;
}
.content-header {
  color: #333;
  font-size: 16px;
}
.content-header .title {
  display: inline-block;
}
.edit {
  float: right;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}
.main-content {
  margin-top: 15px;
}
.main-content section {
  line-height: 28px;
  font-size: 14px;
}
.main-content section span {
  display: inline-block;
}
.main-content .st {
  width: 140px;
  color: #666;
  padding-right: 10px;
}
.table .content {
  display: inline-block;
  border-right: 1px solid #ccc;
}
.table .content:last-child {
  border: none;
}
.table .content > section {
  padding: 10px 15px;
}
.table .content > section span {
  margin-right: 10px;
  display: inline-block;
  width: 80px;
  color: #999;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.table .content > section span:nth-child(2) {
  text-align: center;
}
.table .content > section span:last-child {
  margin-right: 0;
  text-align: center;
}
.rests {
  float: right;
}
.payDetailList {
  width: 300px;
  color: #999;
  box-sizing: content-box;
  padding: 10px 0 10px 150px;
}
.payDetail {
  width: 300px;
  color: #999;
  box-sizing: content-box;
  margin: 10px auto;
}
.segmentation {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid #eee;
}
.el-form-item {
  width: 300px;
  margin: 0 auto;
}
.el-input,
.el-select {
  width: 255px;
  margin-bottom: 2px;
}
</style>
